<template>
	<view class="ownermsg">
		<form @submit="formSubmit" >
			<view class="msg">
				<text>申请人</text>
				<input class="uni-input" name="realname" placeholder="请填写申请人姓名" />
			</view>
			<view class="msg">
				<text>手机号码</text>
				<input class="uni-input phone" name="phone" type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile" @input="inputChange"/>
				<button class="code" @click="getcode()" :disabled="popup">{{btntxt}}</button>
			</view>
			<view class="msg">
				<text>验证码</text>
				<input class="uni-input" name="code" placeholder="请输入验证码" maxlength="4" @input="inputChange"/>
			</view>
			<button form-type="submit">提交并付款</button>
		</form>
	</view>
</template>

<script>
	import {getOne,postOne,msg} from '../../api/publicapi.js'
	
	export default {
		data() {
			return {
				owner: [],
				popup: false,
				mobile: '',
				mobilecode: '',
				btntxt:'获取验证码',
				time:60,
				id:[],
				realname : '',
				phone : '',
				code : '',
                uid:''
			}
		},
		onLoad(options) {
			this.id = options.id
            this.uid = options.ownerid
            console.log( options)
		},
		
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			inputChange(e){
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			getcode(){
				
				if(!(/^1[3456789]\d{9}$/.test(this.mobile))){ 
					msg('请输入正确的手机号码');
					return
				} 
				let data = {
					'phone':this.mobile
				}
				postOne('front/phonecode',data).then(res => {
					if(res.error_code === 0){
						this.timer()
						msg('已发送');
					}
				})
			},
			timer () {
				if (this.time > 0) {
					this.popup = true
					this.time--
					this.btntxt = this.time + 's'
					setTimeout(this.timer, 1000)
			    } else {
					this.popup = false
					this.time = 60
					this.btntxt = '获取验证码'
				}
			},
			formSubmit: function (e) {
				let data = {
					'realname' : e.detail.value.realname,
					'phone' : e.detail.value.phone,
					'code' : e.detail.value.code,
					'id' : this.id,
					'whether' : false,
                     'uid':this.uid
				}
				this.realname = e.detail.value.realname;
				this.phone = e.detail.value.phone;
				this.code = e.detail.value.code;
				postOne('front/ownerthapply/minstore', data).then(res => {
					if (res.status_code === 422) {
						msg(res.message);
					} else {
						if (res.message === 'exist') {
							msg('你已经是业主，无需再次申请');
						} else {
							this.wxpay(res.data)
						}
						//console.log(res);
					}
					
					
					
				})
				
			},
			wxpay(data){
				let that = this
			    uni.requestPayment({
			        appId:data.appId,
			        provider: data.provider,
			        timeStamp: data.timestamp,
			        nonceStr: data.nonceStr,
			        package: data.package,
			        signType: data.signType,
			        paySign: data.paySign,
			        success: function (res) {
						//console.log(res);
						if (res.errMsg === "requestPayment:ok") {
							let datas = {
								'realname' : that.realname,
								'phone' : that.phone,
								'code' : that.code,
								'id' : that.id,
								'whether' : true
							}
							console.log(datas)
							postOne('front/ownerthapply/minstore', datas).then(res => {
								if(res.status_code == 200){
									uni.showModal({
									    content: res.message,
										showCancel: false,
									    success: function (res) {
									        if (res.confirm) {
												uni.switchTab({
												    url: '/pages/user/user'
												});
									            //console.log('用户点击确定');
									        } else if (res.cancel) {
									            //console.log('用户点击取消');
									        }
									    }
									});
								}else{
									msg(res.message)
								}
							})
						}
						
			        },
					fail: function (err) {
					    msg('未支付，申请失败');
					},
			    });
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.ownermsg{
		.msg{
			font-size: 0.9rem;
			display: flex;
			justify-content: flex-start;
			height: 80upx;
			line-height: 80upx;
			background-color: #FFF;
			border-bottom: 1px solid #ccc;
			.phone{
				width: 40%;
			}
			.code{
				margin: 10upx 22upx;
				height: 60upx;
				color: #d23931;
				line-height: 56upx;
				width: 194upx;
				font-size: 0.7rem;
				border-radius: 45upx;
				background-color: #FFF;
				border: 1px solid #d23931
			}
			text{
				width: 28%;
				text-indent: 30upx;
				font-size: 30upx;
			}
			input{
				height: 2rem;
				line-height: 2rem;
				font-size: 26upx;
			}
		}
		button{
			margin-top: 50upx;
			width: 80%;
			height: 74upx;
			line-height: 74upx;
			font-size: 32upx;
			color: #FFF;
			background-color: #d23831;
		}
	}
</style>
